<!--  -->
<template>
  <div>
    <el-dialog @close="close" title="编辑" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :model="page" v-loading="loading" :rules="rules" ref="pageForm" @submit.native.prevent>
        <el-form-item label="页面名称" :label-width="formLabelWidth" prop="name">
          <el-input size="medium" v-model="page.name" maxlength="50" style="width:90%;" autocomplete="off"
            placeholder="输入50个字符以内的页面名称"></el-input>
        </el-form-item>
        <el-form-item label="自定义链接" label-width="120px" v-if="page.type === 1 || page.type === 2" prop="rewrite">
          <el-input v-model="page.rewrite" autocomplete="off" size="medium" maxlength="100" style="width:90%;"
            placeholder="输入非全数字、无空格特殊符号等且100个字符以内的字符串"></el-input>
          <p style="color:#888888;">路径：/{{page.rewrite? page.rewrite: '{系统默认ID}'}}.html</p>
        </el-form-item>
        <el-form-item v-if="isOutPage" label="外部链接" :label-width="formLabelWidth" prop="url">
          <el-input size="medium" v-model="page.url.external" autocomplete="off" style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item v-if="isOutPage" label="打开方式" :label-width="formLabelWidth">
          <el-select size="medium" v-model="page.target" placeholder="请选择" style="width:90%;">
            <el-option label="当前页面跳转" :value="'_self'"></el-option>
            <el-option label="新打开页面跳转" :value="'_blank'"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close">取 消</el-button>
        <el-button size="mini" type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import PubSub from 'pubsub-js'
export default {
  props: {
    propsOnSubmit: {
      type: Function
    }
  },
  data () {
    // 自定义校验
    var checkName = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('页面名称不能都为空格'))
      } else {
        callback()
      }
    }
    var checkRewrite = (rule, value, callback) => {
      if (parseInt(this.page.type) === 3 || parseInt(this.page.type) === 4) {
        callback()
      }
      if (value) {
        if (/^\d+$/.test(value)) {
          callback(new Error('不能全部为数字'))
          return
        }
        if (!/([\u4e00-\u9fa5]|[a-zA-Z0-9])+/.test(value)) {
          callback(new Error('带有空格或特殊符号'))
          return
        }
        if (value.length < 3) {
          callback(new Error('不能小于3个字符'))
          return
        }
        if (/\s/.test(value)) {
          callback(new Error('带有空格'))
          return
        }
        let patrn = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
        if (patrn.test(value)) {
          callback(new Error('带有特殊符号'))
          return
        }
        callback()
        // this.loadingRewrite = true
        // this.$jpost('/page/valid/rewrite', { id: this.page.id, rewrite: value }).then(response => {
        //   this.loadingRewrite = false
        //   if (response && response.error) {
        //     callback(new Error(response.error))
        //     return
        //   }
        //   if (response && response.rewrite) {
        //     callback()
        //   }
        // }, () => {
        //   this.loadingRewrite = false
        // })
      } else {
        callback(new Error('不能为空'))
      }
    }
    var checkSystemId = (rule, value, callback) => {
      if (parseInt(this.page.type) === 2) {
        let systemId = parseInt(this.page.systemId)
        if (isNaN(systemId) || systemId < 1) {
          callback(new Error('请挂载系统'))
          return
        }
      } else {
        this.page.systemId = null
      }
      callback()
    }

    var checkUrl = (rule, value, callback) => {
      if (parseInt(this.page.type) === 3) {
        if (!value.external) {
          callback(new Error('请输入链接地址'))
        }
      }
      // if (value.external) {
      //   if (!/^(http|https|\/\/)/.test(value.external)) {
      //     callback(new Error('需要http、https或者//开头'))
      //   }
      // }
      callback()
    }
    return {
      page: {},
      rules: {
        name: [
          { required: true, message: '请输入页面名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在1到50个字符', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ],
        rewrite: [{ required: true, validator: checkRewrite, trigger: 'change' }],
        systemId: [{ validator: checkSystemId, trigger: 'blur' }],
        url: [{ required: true, validator: checkUrl, trigger: 'blur' }]
      },
      isOutPage: false,
      formLabelWidth: '120px',
      loading: true,
      dialogVisible: false
    }
  },
  methods: {
    close () {
      if (this.$refs['pageForm']) {
        this.$refs['pageForm'].clearValidate()
      }
      this.page = {}
      this.isOutPage = false
      this.loading = true
      this.dialogVisible = false
    },
    show (pId) {
      this.dialogVisible = true
      if (pId > 0) {
        this.loading = true
        this.$post('/page/info', { pageId: pId }).then(response => {
          this.loading = false
          if (response && response.id) {
            this.page = response
            if (this.page && this.page.id) {
              this.page.url = JSON.parse(this.page.url)
              if (this.page.type === 3) {
                this.isOutPage = true
              } else {
                this.isOutPage = false
              }
            }
          }
        })
      }
    },
    save () {
      this.$refs['pageForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          let page = JSON.parse(JSON.stringify(this.page))
          page.url = JSON.stringify(this.page.url)
          // 请求写入数据库
          this.$jpost('/page/design-save', page).then(response => {
            this.loading = false
            if (response && response.id) {
              // 刷新左上角页面菜单数据
              PubSub.publish(PubsubType.PUBSUB_REFRENCE_NAVIGATION_INFO, () => {
                this.dialogVisible = false
                // 刷新页面部分的渲染
                // PubSub.publish(PubsubType.PUBSUB_DESIGN_REFRESH_PAGE)
              })
              // 重新渲染页面的导航部分
              PubSub.publish(PubsubType.PUBSUB_RERENDER_NAVIGATION)
            }
          })
        }
      })
    }
  }
}
</script>
